<!DOCTYPE html>
<html>

<head>
    <title>纽约</title>
    <style>
        body {
            background-color: #d8e7ff;
            font-family: Monospace;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body youdao="bind">
    <div style="position: absolute; left: 0px; top: 15px; width: 100%; color: rgba(0, 0, 64, 0.498039); text-align: center;">click and hold to move forward</div>
    <script src="js/three.min.js"></script>
    <script src="../assets/js/controls/FirstPersonControls.js"></script>
    <script>
        var scene, camera, renderer;
        var light, controls;
        var lastTime;
        init();
        animate();

        function init() {
            renderer = new THREE.WebGLRenderer({
                antialias: false,
                alpha: false
            });
            renderer.setClearColor(0xd8e7ff);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 3000);
            camera.position.y = 80;

            controls = new THREE.FirstPersonControls(camera);
            controls.movementSpeed = 20;
            controls.lookSpeed = 0.05;
            controls.lookVertical = true;

            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2(0xd0e0f0, 0.0025);

            light = new THREE.HemisphereLight(0xfffff0, 0x101020, 1.25);
            light.position.set(0.75, 1, 0.25);
            scene.add(light);

            var plane = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000), new THREE.MeshBasicMaterial({
                color: 0x101018
            }));
            plane.rotation.x = -90 * Math.PI / 180;
            scene.add(plane);

            var geometry = new THREE.CubeGeometry(1, 1, 1);
            geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.5, 0));
            geometry.faces.splice(3, 1);
            geometry.faceVertexUvs[0].splice(3, 1);
            geometry.faceVertexUvs[0][2][0].set(0, 0);
            geometry.faceVertexUvs[0][2][1].set(0, 0);
            geometry.faceVertexUvs[0][2][2].set(0, 0);
            geometry.faceVertexUvs[0][2][3].set(0, 0);

            var mesh = new THREE.Mesh(geometry);
            var geometry = new THREE.Geometry();

            var light = new THREE.Color(0xffffff);
            var dark = new THREE.Color(0x303050);

            for (var i = 0; i < 20000; i++) {
                var n = 1 - Math.random() * Math.random();
                var color = new THREE.Color().setRGB(n + Math.random() * 0.1, n,
                    n + Math.random() * 0.1);

                var lightColor = color.clone().multiply(light);
                var darkColor = color.clone().multiply(dark);

                mesh.position.x = Math.floor(Math.random() * 200 - 100) * 10;
                mesh.position.z = Math.floor(Math.random() * 200 - 100) * 10;

                mesh.rotation.y = Math.random();

                mesh.scale.x = mesh.scale.z = Math.random() * Math.random() * Math.random() * Math.random() * 50 + 10;
                mesh.scale.y = (Math.random() * Math.random() * Math.random() *
                    mesh.scale.x) * 8 + 8;

                var geometry1 = mesh.geometry;

                for (var j = 0, len = geometry1.faces.length; j < len; j++) {
                    if (j === 2) {
                        geometry1.faces[j].vertexColors = [color, color, color, color];
                    } else {
                        geometry1.faces[j].vertexColors = [lightColor, darkColor, darkColor,
                            lightColor
                        ];
                    };
                };
                THREE.GeometryUtils.merge(geometry, mesh);
            };

            var texture = new THREE.Texture(generateTexture());
            texture.anisotropy = renderer.getMaxAnisotropy();
            texture.needsUpdate = true;

            var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
                map: texture,
                vertexColors: THREE.VertexColors
            }));
            scene.add(mesh);

            var div = document.createElement('div');
            div.style.position = 'absolute';
            div.style.left = '0';
            div.style.top = '15px';
            div.style.width = '100%';
            div.style.color = 'rgba(0,0,64,0.5)';
            div.style.textAlign = 'center';
            div.textContent = 'click and hold to move forward';
            document.body.appendChild(div);

            lastTime = performance.now();
        };

        function generateTexture() {
            var canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = 64;

            var context = canvas.getContext('2d');
            context.fillStyle = '#ffffff';
            context.fillRect(0, 0, 32, 64);

            for (var i = 2; i < 64; i += 2) {
                for (var j = 0; j < 32; j += 2) {
                    var n = Math.floor(Math.random() * 64);
                    context.fillStyle = 'rgb(' + [n, n, n].join(',') +
                        ')';
                    context.fillRect(j, i, 2, 1);
                };
            };

            var canvas1 = document.createElement('canvas');
            canvas1.width = 512;
            canvas1.height = 1024;

            var context = canvas1.getContext('2d');
            context.imageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.mozImageSmoothingEnabled = false;
            context.drawImage(canvas, 0, 0, canvas1.width, canvas1.height);
            return canvas1;
        };

        function animate() {
            requestAnimationFrame(animate);
            var time = performance.now() / 1000;
            controls.update(time - lastTime);
            renderer.render(scene, camera);
            lastTime = time;
        };
    </script>
</body>

</html>